<script setup lang="ts">
// 导入 Vue 的核心 API
import { computed, reactive, ref, watch } from 'vue';
// 导入自定义表单钩子
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
// 导入获取所有角色的 API
import { fetchGetAllRoles, fetchGetAllRoles1 } from '@/service/api';
// 导入本地化函数
import { $t } from '@/locales';
// 导入业务常量
import { enableStatusOptions, userGenderOptions } from '@/constants/business';
// 定义组件选项
defineOptions({
  name: 'UserOperateDrawer' // 组件名称
});

// 定义组件的 Props 接口
interface Props {
  /** 操作类型 */
  operateType: NaiveUI.TableOperateType;
  /** 编辑的行数据 */
  rowData?: Api.SystemManage.User | null;
}

// 获取组件的 Props
const props = defineProps<Props>();

// 定义组件的 Emits 接口
interface Emits {
  (e: 'submitted'): void; // 提交事件
}

// 获取组件的 Emits
const emit = defineEmits<Emits>();

// 定义组件的 Model 可见性
const visible = defineModel<boolean>('visible', {
  default: false // 默认值为 false
});

// 使用自定义表单钩子来管理表单状态和操作
const { formRef, validate, restoreValidation } = useNaiveForm();
// 使用表单规则钩子获取默认必填规则
const { defaultRequiredRule } = useFormRules();

// 根据操作类型计算标题
const title = computed(() => {
  const titles: Record<NaiveUI.TableOperateType, string> = {
    add: $t('page.manage.user.addUser'), // 添加用户标题
    edit: $t('page.manage.user.editUser') // 编辑用户标题
  };
  return titles[props.operateType];
});

// 定义模型类型
type Model = Pick<Api.SystemManage.User, 'title' | 'cate_id' | 'cover_img' | 'image' | 'content' | 'state'>;

// 创建表单模型并设置默认值
const model: Model = reactive(createDefaultModel());

// 创建默认模型函数
function createDefaultModel(): Model {
  return {
    title: '', // 文章标题
    cate_id: '', // 文章分类
    cover_img: '',
    image: '', // 文章封面
    content: '', // 文章内容
    state: '已发布'
  };
}

// 定义表单规则键
type RuleKey = Extract<keyof Model, 'title' | 'cate_id'>;

// 定义表单验证规则
const rules: Record<RuleKey, App.Global.FormRule> = {
  title: defaultRequiredRule, // 标题必填规则
  cate_id: defaultRequiredRule // 分类必填规则
};

// 图像上传变化处理函数
const onSelectFile = (uploadFile: { fileList: any[] }) => {
  // model.image = URL.createObjectURL(file.raw);
  console.log(uploadFile);
  model.image = uploadFile.file;
  model.cover_img = uploadFile.file.file;
  console.log(model);
  // if (uploadFile.fileList.length > 0) {
  //   const file = uploadFile.fileList[0];
  //   if (file.raw) {
  //     model.image = URL.createObjectURL(file.raw);
  //     model.cover_img = file.raw;
  //   }
  // }
};

// 定义角色选项的 ref
const roleOptions = ref<CommonType.Option<string>[]>([]);
const fileList = ref([]);

// 获取角色选项的异步函数
async function getRoleOptions() {
  try {
    const { error, data } = await fetchGetAllRoles();
    if (!error) {
      roleOptions.value = data.map(role => ({
        label: role.cate_name,
        value: role.id
      }));
    } else {
      // 处理错误
      window.$message?.error($t('common.fetchError'));
    }
  } catch (err) {
    // 处理请求异常
    console.error(err);
    window.$message?.error($t('common.fetchError'));
  }
}

// 初始化表单模型函数
function handleInitModel() {
  Object.assign(model, createDefaultModel());
  fileList.value = []; // 重置文件列表

  if (props.operateType === 'edit' && props.rowData) {
    Object.assign(model, props.rowData);
  }
}

// 关闭抽屉函数
function closeDrawer() {
  visible.value = false;
}

// 提交表单函数
async function handleSubmit() {
  const fd = new FormData();

  // 遍历 model 的键值对，将它们添加到 FormData 中
  for (const key in model) {
    if (Object.hasOwn(model, key)) {
      fd.append(key, model[key]);
    }
  }

  const res = await fetchGetAllRoles1(fd);
  console.log(res);
  window.$message?.success($t('common.updateSuccess'));
  closeDrawer();
  emit('submitted');
}

// 监听 visible 的变化，当抽屉显示时初始化表单和获取角色选项
watch(visible, () => {
  if (visible.value) {
    handleInitModel();
    restoreValidation();
    getRoleOptions();
  }
});
</script>

<template>
  <!-- 抽屉组件 -->
  <NDrawer v-model:show="visible" display-directive="show" :width="300">
    {{ model }}
    <!-- 抽屉内容组件 -->
    <NDrawerContent :title="title" :native-scrollbar="false" closable>
      <!-- 表单组件 -->
      <NForm ref="formRef" :model="model" :rules="rules">
        <NFormItem :label="$t('page.manage.user.title')" path="title">
          <NInput v-model:value="model.title" :placeholder="$t('page.manage.user.form.title')" />
        </NFormItem>
        <NFormItem :label="$t('page.manage.user.cate_name')" path="cate_id">
          <NSelect
            v-model:value="model.cate_id"
            :options="roleOptions"
            :placeholder="$t('page.manage.menu.form.state')"
          />
        </NFormItem>
        <NFormItem label="文章封面" path="image">
          <NUpload :default-file-list="fileList" list-type="image-card" :on-change="onSelectFile" :max="1">
            <template>点击上传</template>
          </NUpload>
        </NFormItem>
        <NFormItem label="文章内容" path="content">
          <NInput v-model:value="model.content" :placeholder="$t('page.manage.user.form.content')" />
        </NFormItem>
      </NForm>
      <!-- 抽屉底部按钮 -->
      <template #footer>
        <NSpace :size="16">
          <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
          <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
        </NSpace>
      </template>
    </NDrawerContent>
  </NDrawer>
</template>

<style scoped></style>
